<template>
  <div class="input">
    <div class="title">
        <p>添加任务</p>
    </div>
    <div class="icons">
        <div class="icon-box" >
            <span class="iconfont icon icon1">&#xe603;</span>
            <p class="icon-txt">日程</p>
        </div>
        <div class="icon-box" >
            <span class="iconfont icon">&#xe602;</span>
            <p class="icon-txt">生日</p>
        </div>
        <div class="icon-box" >
            <span class="iconfont icon">&#xe62c;</span>
            <p class="icon-txt">纪念日</p>
        </div>
        <div class="icon-box" >
            <span class="iconfont icon icon1">&#xe60f;</span>
            <p class="icon-txt">倒数日</p>
        </div>
    </div>
    <div class="content">
      <div class="input-duty">
        <input type="text" placeholder="请输入事件标题" v-model="duty">
      </div>

      <div class="message-warn">
        <p class="title1">开启短信提醒</p>
        <cube-switch v-model="isOpenMessageWarn" @input="changeIsMessageWarn"></cube-switch>
      </div>

      <div class="message-warn">
        <p class="title1">设置时间</p>
        <div @click="showTimePicker">
          <p class="title2">{{ timeTip }}</p>
          <span class="iconfont toRightIcon">&#xe62d;</span>
        </div>
      </div>

      <cube-button :primary="true" class="submit" @click="submit">提交</cube-button>
    </div>
  </div>
</template>

<script>
import { TimePicker, Input, Switch, Button,Toast,Dialog } from "cube-ui";
import axios from 'axios'

import util from '@/util/util'

export default {
  name: "Input",
  data() {
    return {
      maxlength: 20,
      type: "text",
      duty: "",
      isOpenMessageWarn: false,
      selectedTime: "",
      formatedTime: "",
      timeTip: "去设置"
     
    };
  },
  methods: {
    
    reqAddDuty (gazi_token, duty, isOpenMessageWarn, selectedTime) {
      var _this = this;
        axios({
          method: 'get',
          url: '/addDuty',
          params: {
            gazi_token: gazi_token,
            duty: duty,
            isOpenMessageWarn: isOpenMessageWarn ? 1 : 0,
            selectedTime: selectedTime
          }
        })
        .then(function (response) {
          let datas = response.data;
          if (datas.status !== 0) return false;
          window.valueBus.updateDuty = true;
          _this.$createToast({
            txt: '添加成功',
            time: 1000,
            type: 'correct'
          });
          setTimeout(() => {
            _this.$router.replace({
              path:'/'
            })
          }, 1000);
        }, function (err) {
          console.log(err);
        })
    },
    submit() {
      let isOpenMessageWarn = this.isOpenMessageWarn;
      let duty = this.duty;
      let selectedTime = this.selectedTime;
      let formatedTime = this.formatedTime;
      let gazi_token = localStorage.getItem('gazi_token');
      
      this.reqAddDuty(gazi_token, duty, isOpenMessageWarn, selectedTime);
      

      this.$createToast({
          time: 1000,
          txt: '提交中',
          mask: true
      }).show();
    },
    changeIsMessageWarn() {
      let txt = this.isOpenMessageWarn ? "开启短信通知" : "关闭短信通知";
      this.$createToast({
        type: "correct",
        txt: txt,
        time: 1500
      }).show();
    },
    showTimePicker() {
      var _this = this;
      if (!this.duty) {
        this.$createToast({
          type: "correct",
          txt: "未输入任务",
          time: 1500
        }).show();
        return;
      }

        const column1 = [];
        const column2 = [];
        
        for (let i = 0; i <= 24; i++)
        {
          column1.push(
            i < 10 ? { text: '0' + i, value: i } : { text: '' + i, value: i }
          )
        };

        for (let i = 0; i <= 59; i++)
        {
          column2.push(
            i < 10 ? { text: '0' + i, value: i } : { text: '' + i, value: i }
          )
        };

        if (!this.mutiPicker) {
        this.mutiPicker = this.$createPicker({
          title: '选择时间',
          data: [column1, column2],
          onSelect: function (datas) {
            var chooseDate = JSON.parse(window.localStorage.chooseDate);
            var year = chooseDate.year;
            var month = chooseDate.month;
            var day = chooseDate.day;
            var hour = datas[0];
            var minute = datas[1];
            var date = new Date(year, month - 1, day, hour, minute);
            
            var selectedTime = date.getTime();
            var selectedText = `${month}月${day}日 ${hour}点 : ${minute < 10 ? '0' + minute : minute}分`;
            _this.selectedTime = selectedTime;
            _this.timeTip = selectedText;

            _this.$createDialog({
            type: "warn",
            title: `添加任务`,
            content: selectedText + " " + _this.duty,
            icon: "cubeic-alert"
          }).show();
            
          },
          onCancel: function (datas) {
              
          }
        })
      }
      this.mutiPicker.show()


      // this.$createTimePicker({
      //   showNow: true,
      //   minuteStep: 5,
      //   delay: 15,
      //   day: {
      //     len: 1,
      //     filter: ['选择的日期']
      //   },
      //   onSelect: (selectedTime, selectedText, formatedTime) => {
      //     _this.selectedTime = selectedTime;
      //     _this.formatedTime = formatedTime;
      //     _this.timeTip = selectedText;
      //     console.log(new Date(formatedTime))
      //     this.$createDialog({
      //       type: "warn",
      //       title: `添加任务`,
      //       content: selectedText + " " + _this.duty,
      //       icon: "cubeic-alert"
      //     }).show();
      //   },
      //   onCancel: () => {
      //     this.$createToast({
      //       type: "correct",
      //       txt: "取消选择",
      //       time: 1000
      //     }).show();
      //   }
      // }).show();


    }
  },
  mounted () {
        //验证成功
        util.checkLogin().then( function () {
            
        }, function () {
        //验证失败重置界面到登录界面
            _this.$router.replace({
                path: '/login'
            })


        });
  }


};
</script>

<style lang="stylus" scoped>
@import '~styles/common.styl';

.input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: $bgColor;
  .title {
    width: 90%;
    padding: 0 5%;
    height 1.5rem
    display flex
    align-items center
    justify-content center
    p {
        color #333333
        font-size .4rem
        font-weight bold
    }
   }
  .icons {
    width: 90%;
    padding: 0 5%;
    display: flex;
    align-items center;
    justify-content space-around
    height 2.3rem
    background white
    
    .icon-box {
        height 100%
        display flex
        flex-direction column
        align-items center
        justify-content center
        
        .icon {
            font-size 1rem    
            color #1296db
        }
        .icon1 {
            font-size .8rem 
        }
        .icon2 {
            font-size .7rem 
        }

        .icon-txt {
            font-size .38rem
            color gray
            margin-top .2rem
        }
    }
        
  }

  .content {
    width: 90%;
    padding: 0 5% .5rem 5%;
    display: flex;
    flex-direction: column;
    background white
    margin-top .3rem
    
    .submit {
      margin-top: 1rem;
    }

    .input-duty {
      width: 100%;
      height: 1.1rem;
      display: flex;
      border-bottom: 0.02rem solid $borderColor;
      margin-top: 0.3rem;

      input {
        height: 0.9rem;
        background: transparent;
        color: $fontColor;
        font-size: 0.42rem;
      }

      input::placeholder {
        color: gray;
      }
    }

    .message-warn {
      width: 100%;
      height: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.02rem solid $borderColor;

      .title1 {
        font-size: 0.4rem;
        color: $fontColor;
      }

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .title2 {
          font-size: 0.38rem;
          color: gray;
          margin-right: 0.2rem;
        }

        .toRightIcon {
          color: gray;
        }
      }
    }
  }
}
</style>


